<style lang="less">
@import "../../styles/common.less";
@import "./user-list.less";
.ivu-form-item-label {
  text-align: left;
  margin-left: 12px;
}
.vertical-center-modal {
  position: absolute;
  top: -5%;
  left: 35%;
}
.upload-box{
    display: flex;
    align-items: center;
}
  .demo-upload-list{
        // display: inline-block;
        width: 100px;
        height: 100px;
        text-align: center;
       
        //border: 1px solid transparent;
        //border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        //box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 40px;
       
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom:0;
        left: 0;
        right: 0;
        margin: auto;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        
    }
</style>

<template>
  <div>
      
    <Row class="margin-top-10">
      <Col span="24">
        <Card>
          <p slot="title">BD列表</p>
          <Row>
            <Input
              v-model="searchName"
              placeholder="姓名"
              style="width: 100px"
              @on-change="conhidi1"
            />
           
            <Input
              v-model="searchIdCardNo"
              placeholder="身份证号码"
              style="width: 150px"
              @on-change="conhidi2"
            />
            <Input
              v-model="searchPersonalPhone"
              placeholder="手机号码"
              style="width: 120px"
              @on-change="conhidi3"
            />
            <DatePicker
              type="daterange"
              v-model="searchRegisterDate"
              @click.native="conhidi4"
              placement="bottom-end"
              placeholder="注册日期"
              style="width: 200px"
            ></DatePicker>
            <Button type="success" @click="searchData()">查询</Button>
           
          
          </Row>

          <Row class="margin-top-10">
            <Col span="24">
              <div>
                <Table
                  :columns="memberColumn"
                  :data="memberData"
                  :loading="loading"
                  border
                  stripe
                  @on-row-dblclick="view"
                ></Table>
              </div>
            </Col>
          </Row>
          <Row class="margin-top-10">
            <Page
              ref="memberpage"
              :total="total"
              size="small"
              :pageSize="pageSize"
              @on-change="changepage"
              show-total
              show-elevator
            ></Page>
          </Row>
        </Card>
        <Table ref="deliveryTable" style="display:none"></Table>
      </Col>
    </Row>

    <Modal v-model="showInfo" title="修改BD资料">
      <Form :label-width="120">
        <FormItem label="联系人">
          <Input v-model="editInfo.contactName" style="width:90%"></Input>
        </FormItem>
        <FormItem label="联系方式">
          <Input v-model="editInfo.contactMobile" style="width:90%"></Input>
        </FormItem>

        <FormItem label="身份证号码">
          <Input v-model="editInfo.idCardNo" style="width:90%"></Input>
        </FormItem>
        <FormItem label="身份正面">
            <div class="upload-box">  
					     
                          <div class="demo-upload-list" v-if="editInfo.idcardImgFront" >
                              
						        <template >
						            <img :src="editInfo.idcardImgFront" />
						            <div class="demo-upload-list-cover">
						                <Icon type="ios-eye-outline" @click.native="handleView(editInfo.idcardImgFront)"></Icon>
						                <Icon type="ios-trash-outline" @click.native="handleRemove('idcardImgFront')"></Icon>
						            </div>
						        </template>

						    </div>
						  
						    <Upload
						        ref="upload"
						        :show-upload-list="false"
						        :on-success="handleFrontSuccess"
						        :format="['jpg','jpeg','png']"
                                accept="image/jpg,image/jpeg,image/png"
						        :max-size="2048"
						        type="drag"
								:action="upUrl"
						        style="display: inline-block;width:58px;">
						        <div style="width: 58px;height:58px;line-height: 58px;">
						            <Icon type="camera" size="20"></Icon>
						        </div>
						    </Upload>
	   			   </div>
        </FormItem>
        <FormItem label="身份反面">
         <div class="upload-box">
					     
                          <div class="demo-upload-list" v-if="editInfo.idcardImgBack">
						        <template >
						            <img :src="editInfo.idcardImgBack">
						            <div class="demo-upload-list-cover">
						                <Icon type="ios-eye-outline" @click.native="handleView(editInfo.idcardImgBack)"></Icon>
						                <Icon type="ios-trash-outline" @click.native="handleRemove('idcardImgBack')"></Icon>
						            </div>
						        </template>

						    </div>
						  
						    <Upload
						         ref="upload"
						        :show-upload-list="false"
						        :on-success="handleBackSuceess"
						        :format="['jpg','jpeg','png']"
                                accept="image/jpg,image/jpeg,image/png"
						        :max-size="2048"
						        type="drag"
								:action="upUrl"
						        style="display: inline-block;width:58px;">
						        <div style="width: 58px;height:58px;line-height: 58px;">
						            <Icon type="camera" size="20"></Icon>
						        </div>
						    </Upload>
	   			   </div>
        </FormItem>
        <FormItem label="佣金比例">
          <Input v-model="editInfo.bdAwardRate" style="width:90%"></Input>
        </FormItem>
        
      </Form>
      <div slot="footer">
        <Button type="text" @click="infocancel">取消</Button>
        <Button :loading="infoLoading" type="primary" @click="changeInfo">确定</Button>
      </div>
    </Modal>

      <Modal title="查看图片" v-model="visible">
	       <img :src="img" v-if="visible" style="width: 100%">
	</Modal>
    <!-- 删除提示 -->
    <Modal v-model="isDel" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>删除确认</span>
        </p>
        <div style="text-align:center">
          
            <p>是否继续删除？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="del_loading" @click="delRow">删除</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'memberlist',
  data() {
    return {
      //编辑信息
       editInfo:{
        
        bdAwardRate: '',
        contactMobile: '',
        contactName: '',
        idCardNo: '',
        idcardImgBack: '',
        idcardImgFront:'',
        userLevelDTO:"",
        userUuid:""
      },
      delData:{},
    //   是否显示大图
      visible:false,
   //图片链接
      img:'',
    //   图片上传地址
      upUrl:this.$http.defaults.baseURL + "admin/uploadMediaFile",
    // 是否显示删除提示
    isDel:false,
    // 删除加载
    del_loading:false,
      changeSupervisorRow: {},
      addModel: false,
      addLoading: false,
      supervisorLoading: false,
      memoModal: false,
      changeSupervisorModal: false,
      editRow: {},
      userLevels: [],
      model2: "",
      expor1: "0",
      loading: false,
      loadingmemo: false,
      inventoryLoading: false,
      balanceLoading: false,
      infoLoading: false,
      searchName: "",
      exportData: [],
      params: [],
      searchIdCardNo: "",
      searchPersonalPhone: "",
      searchRegisterDate: null,
      newTrainerLevel: "",
      showUpgrade: false,
      showInventory: false,
      showInfo: false,
      showBalance: false,
      addModel: false,
      editRoleModel: false,
      loadingExport: false,
      multipleCouponModel: false,
      editRow: {},
      addRow: {},
      multipleCouponRow: {},
      userColumn: [],
      memberColumn: [],
      memberColumn1: [],
      searchLevel: "",
      totalData: [],
      userData: [],
      memberData: [],
      userList: [],
      userLoading: false,
      upgradeUser: {},
      inventoryUser: {
        userInventoryDTO: {},
        userBalanceDTO: {}
      },
      balanceUser: {
        userInventoryDTO: {},
        userBalanceDTO: {}
      },
      infoUser: {
        userInventoryDTO: {},
        userBalanceDTO: {}
      },
      addUser: {
        userInventoryDTO: {},
        userBalanceDTO: {}
      },
      total: 0,
      pageSize: 20,
      totala: 0,
      pageSizea: 99999
    };
  },
  methods: {
    //  修改搜索条件
      conhidi1() {
      this.searchLevel = null;
      this.searchIdCardNo = null;
      this.searchPersonalPhone = null;
      this.searchRegisterDate = null;
    },
    conhidi2() {
      this.searchLevel = null;
      this.searchName = null;
      this.searchPersonalPhone = null;
      this.searchRegisterDate = null;
    },
    conhidi0() {
      this.searchIdCardNo = null;
      this.searchName = null;
      this.searchIdCardNo = null;
      this.searchRegisterDate = null;
    },
    conhidi3() {
      this.searchLevel = null;
      this.searchName = null;
      this.searchIdCardNo = null;
      this.searchRegisterDate = null;
    },
    conhidi4() {
      if (this.searchRegisterDate) {
        this.searchName = null;
        this.searchIdCardNo = null;
        this.searchPersonalPhone = null;
        this.searchLevel = null;
      }
    },
    //上传正面身份证图片成功
   handleFrontSuccess(e){
    
     this.editInfo.idcardImgFront=e.data[0]

     console.log('editInfo==>',this.editInfo)
   },
   handleBackSuceess(e){
    this.editInfo.idcardImgBack=e.data[0]
   },
   handleView(e){
     this.visible=true
     this.img=e
   },
   handleRemove(e){
     this.editInfo[e]=''
   },
  
    getData() {
    // <!-- 编号 姓名 手机号码 身份证号码 注册日期 -->
      this.memberColumn = [
        {
          title: "编号",
          align: "center",
          key: "id",
          width: 65
        },
        {
          title: "姓名",
          align: "center",
          key: "name",
          width: 200,
          render: (h, params) => {
							return h(
								"span", {
									props: {
										row: params.row
                  },
                  style: {
                      'display': 'flex',
                      'align-items':'center'
										}
								},
								[
									h("img", {
										attrs: {
											src: params.row.photoUrl
										},
										style: {
                      'border-radius': "50%",
                      height: '40px',
                      width: '40px'
										}
									}),
									h(
										"span", {
											style: {
                        'margin-left':'10px',
                        'width': '120px',
                        'text-align': 'left',
                        'overflow': 'hidden',
                        'text-overflow': 'ellipsis',
                        'white-space': 'nowrap'
											}
										},
										params.row.name
									)
								]
							);
						}
        },
        {
          title: "手机号码",
          align: "center",
          key: "personalPhone",
          width: 115
        },
        {
          title: "身份证号码",
          align: "center",
          key: "idCardNo",
          width: 160
        },
      
        {
          title: "注册日期",
          align: "center",
          key: "registerDate",
          width: 140,
          sortable: true
        },
         {
          title: "操作",
          align: "center",
          width: 450,
          render: (h, params) => {
            return h("div", [
             h(
                "Button",
                {
                  props: {
                    type: "default",
                    size: "small"
                  },
                  style: {
                    'margin-left': "10px "
                  },
                  on: {
                    click: event => {
                      this.getInfo(params.row);
                    }
                  }
                },
                "修改BD资料"
              ),
               h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                     'margin-left': "10px "
                  },
                  on: {
                    click: event => {
                      this.openDel(params.row);
                    }
                  }
                },
                "删除"
              )
              
            ]);

            
          }
        }
        
       
      ];
      this.memberColumn1 = [
        {
          title: "编号",
          key: "id"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "会员等级",
          key: "userLevelName"
        },
        {
          title: "手机号码",
          key: "personalPhone"
        },
        {
          title: "身份证号码",
          key: "idCardNo"
        },
        {
          title: "邀请人",
          key: "supervisorL1Name"
        },
        {
          title: "直接辅导人",
          key: "supervisorL2Name"
        },
        {
          title: "间接辅导人",
          key: "supervisorL3Name"
        },
        {
          title: "注册日期",
          key: "registerDate"
        },
        {
          title: "可提现余额",
          key: "availableBalance"
        },
        {
          title: "未到账金额",
          key: "ledgerBalance"
        },
        {
          title: "积分余额",
          key: "availablePoint"
        },
        {
          title: "备注",
          key: "memo"
        }
      ];
    },
   
    changeUser(row, actionType) {
      let logistics = {
        actionType: actionType,
        userUuid: row.userUuid
      };
      this.$http.post("/admin/changeUser", this.common.request(logistics)).then(
        response => {
          this.loading = false;
          if (response.data.body.status.statusCode == 0) {
            var data = response.data.body.data;
            this.$Notice.success({
              title: actionType == "DISABLE" ? "会员已停用" : "会员已启用",
              duration: 2
            });
            this.initData();
          } else {
            this.$Message.error(response.data.body.status.errorDesc);
          }
        },
        response => {
          this.$Message.error(response.data.body.status.errorDesc);
          this.loading = false;
        }
      );
    },
   
    initData() {
      this.searchUser(0, this.pageSize);
    },
    searchData() {
      this.searchUser(0, this.pageSize);
      this.resetpage();
    },
    inquiryUserLevel() {
      this.$http.post("/public/getUserLevel", this.common.request({})).then(
        response => {
          this.userLoading = false;
          if (response.data.body.status.statusCode == 0) {
            var data = response.data.body.data;
            this.userLevels = data.levels;
          } else {
            this.$Message.error(response.data.body.status.errorDesc);
          }
        },
        response => {
          this.userLoading = false;
          this.$Message.error(response.data.body.status.errorDesc);
        }
      );
    },
    searchUserByName(query) {
      if (!query) {
        return;
      }
      let searchOptions = {
        startIndex: 0,
        pageSize: 10,
        keyArray: ["NAME"],
        name: query
      };
      this.userLoading = true;
      this.$http
        .post("/admin/searchUser", this.common.request(searchOptions))
        .then(
          response => {
            this.userLoading = false;
            if (response.data.body.status.statusCode == 0) {
              var data = response.data.body.data;
              this.userList = data.userList;
            } else {
              this.$Message.error(response.data.body.status.errorDesc);
            }
          },
          response => {
            this.userLoading = false;
            this.$Message.error(response.data.body.status.errorDesc);
          }
        );
    },
    searchUser(startIndex, pageSize, isExport) {
      let searchOptions = {
        startIndex: startIndex,
        pageSize: pageSize
      };
      let keyArray = ['BD'];
      //判断是否有姓名查询条件
      if (this.searchName) {
        keyArray.push("NAME");
        searchOptions.name = this.searchName;
      }
      //判断会员等级
      if (this.searchLevel) {
        keyArray.push("LEVEL");
        searchOptions.userLevelUuid = this.searchLevel;
      }
      //判断是否有身份证查询条件
      if (this.searchIdCardNo) {
        keyArray.push("IDCARDNO");
        searchOptions.idCardNo = this.searchIdCardNo;
      }
      //判断是否有身手机号码查询条件
      if (this.searchPersonalPhone) {
        keyArray.push("PERSONALPHONE");
        searchOptions.personalPhone = this.searchPersonalPhone;
      }
      //判断是否有注册时间查询条件
      var searchDate = this.searchRegisterDate;
      if (searchDate && searchDate[0] && searchDate[1]) {
        keyArray.push("REGISTERDATE");
        var startDate = searchDate[0];
        var endDate = searchDate[1];
        searchOptions.registerDateStart = startDate;
        searchOptions.registerDateEnd = endDate;
      }
      searchOptions.keyArray = keyArray;
      if (isExport) {
      } else {
        this.loading = true;
      }
      this.$http
        .post("/admin/searchUser", this.common.request(searchOptions))
        .then(
          response => {
            if (!isExport) {
              this.loading = false;
            }
            if (response.data.body.status.statusCode == 0) {
              var data = response.data.body.data;
              if (isExport) {
                var userList = ["会员列表", this.memberColumn1, data.userList];
                this.exportData = userList;
                this.exportMember();
              } else {
                this.memberData = data.userList;
                this.total = data.total;
              }
            } else {
              this.$Message.error(response.data.body.status.errorDesc);
            }
          },
          response => {
            this.loading = false;
            this.$Message.error(response.data.body.status.errorDesc);
          }
        );
    },
    //将分页页码重置成1
    resetpage() {
      this.$nextTick(function() {
        this.$refs["memberpage"].currentPage = 1;
      });
    },
    //处理分页页数改变, 重新查询该页数据
    changepage(index) {
      var startIndex = (index - 1) * this.pageSize;
      this.searchUser(startIndex, this.pageSize);
    },
    
    //获取修改数据
    getInfo(row) {
      this.showInfo = true;
  
      this.editInfo.contactName = row.contactName;
      this.editInfo.contactMobile = row.contactMobile;
      this.editInfo.idCardNo = row.idCardNo;
      this.editInfo.idcardImgFront = row.idcardImgFront;
      this.editInfo.idcardImgBack = row.idcardImgBack;
      this.editInfo.bdAwardRate = row.bdAwardRate;
      this.editInfo.userLevelDTO={userLevelUuid:row.userLevelDTO.userLevelUuid};
      this.editInfo.userUuid=row.userUuid
      

    },
    //显示删除弹框
    openDel(row){
     let options={"actionType":"DISABLEBD"}
     options.userUuid=row.userUuid
     this.delData=options
     this.isDel=true
    },
    // 删除行
    delRow(){
      this.del_loading=true
      this.infoLoading = true;
      this.$http.post("/admin/changeUser", this.common.request(this.delData)).then(
        response => {
          this.infoLoading = false;
          this.del_loading=false
          this.isDel=false
          if (response.data.body.status.statusCode == 0) {
            this.showInfo = false;
            this.$Notice.success({
              title: "删除成功",
              duration: 2
            });
            this.resetpage();
            this.searchUser(0, this.pageSize, false);
          } else {
            this.$Message.error(response.data.body.status.errorDesc);
          }
        },
        response => {
          this.infoLoading = false;
          this.$Message.error(response.data.body.status.errorDesc);
        }
      );

    },
    // 
    changeInfo() {
    
      let options = {
        actionType: "BDINFO",
      };
      options=Object.assign(options,this.editInfo)

      console.log('options===>',options)
    
      this.infoLoading = true;
      this.$http.post("/admin/changeUser", this.common.request(options)).then(
        response => {
          this.infoLoading = false;
          if (response.data.body.status.statusCode == 0) {
            this.showInfo = false;
            this.$Notice.success({
              title: "修改成功",
              duration: 2
            });
            this.resetpage();
            this.searchUser(0, this.pageSize, false);
          } else {
            this.$Message.error(response.data.body.status.errorDesc);
          }
        },
        response => {
          this.infoLoading = false;
          this.$Message.error(response.data.body.status.errorDesc);
        }
      );
    },
    upgradecancel() {
      this.showUpgrade = false;
    },
    balancecancel() {
      this.showBalance = false;
    },
    inventorycancel() {
      this.showInventory = false;
    },
    infocancel() {
      this.showInfo = false;
    },
    supervisorcancel() {
      this.changeSupervisorModal = false;
    },
    view(row) {
      this.$router.push({
        name: "memberdetail",
        query: { userUuid: row.userUuid }
      });
    },
    viewstation(row) {
      this.$router.push({
        name: "stationdetail",
        query: { merchantUuid: row.merchantDTO.merchantUuid }
      });
    },
    allMember() {
      this.loadingExport = true;
      this.searchUser(0, 99999, true);
    },
    exportMember() {
      var exportData = this.exportData;
      this.$refs.deliveryTable.exportCsv({
        filename: exportData[0],
        columns: exportData[1],
        data: exportData[2]
      });
      this.loadingExport = false;
    }
  },
  created() {
    this.getData();
    this.initData();
    this.inquiryUserLevel();
  }
};
</script>
